About the Course
Full-stack web development refers to the development of both the front-end (client-side) and back-end (server-side) components of web applications. This means a full-stack developer possesses the skills and knowledge to work on all layers of a web application, from the user interface to the underlying server logic and database
-
Introduction
-
HTML and CSS
-
Headings and paragraphs -
Vs code plugins and themes
-
HTML document and head section
-
Using CSS stylesheet
-
Writing CSS
-
Learning tips and writing comments
-
Using Google fonts
-
Display image on HTML page
-
Media queries CSS for responsive images
-
Margins and paddings
-
HTML list items
-
Clickable links
-
Border styling and hover effects
-
Text shadow and background color
-
Image as background
-
Parallax image background
-
Gradient color background
-
HTML form
-
Styling HTML form
-
Using icons
-
HTML header and footer
-
-
Bootstrap
-
Bootstrap css framework
-
Using Bootstrap via CDN
-
Downloading Bootstrap (optional)
-
Containers, rows and columns
-
Columns styling, offset, background, margin and padding
-
Styling divs and texts using margin, padding and colors
-
Responsive images
-
Buttons and lists
-
Bootstrap forms
-
Bootstrap tables
-
Bootstrap navigation menu
-
Bootstrap carousel image slider
-
Bootstrap popup modal
-
-
Github
-
JavaScript
-
What is JavaScript
-
JavaScript in HTML
-
Different ways of creating variables
-
String manipulation
-
Doing math with numbers
-
JavaScript objects
-
Display object info on the page
-
JavaScript operators
-
If else statements
-
Loops in JavaScript
-
Object info display using for-in loop
-
Functions in JavaScript
-
Arrow functions
-
Greeting app
-
Template literals
-
Arrays in JavaScript
-
Display array item in HTML
-
Working with object
-
new Keyword, constructor function and prototype
-
Classes in JavaScript
-
Regular expressions
-
BOM - Browser object model
-
DOM - Document object model
-
-
Project JavaScript JQuery and Vue
-
NodeJS
-
ReactJS with NextJS
-
What is React
-
Why learn React and NextJs
-
Setup React and NextJs project
-
React component
-
Passing properties and default parameters
-
useState hook and spread operator
-
Using NPM packages with React
-
useEffect hook to make API calls
-
Conditional rendering, state changes and inline styling
-
Breaking code into reusable components
-
NextJs custom App component
-
Using CSS files
-
Serving images
-
Global state using React Context
-
Route queries
-
Fetch request based on route query
-
Client vs server side rendering
-
Fetch data using server side rendering
-
Head section for meta content
-
Using CDN links
-
-
NextJs 13 with App Directory
-
API Development
-
Welcome to Full Stack JavaScript
-
NodeJS server setup
-
Routes log view using morgan
-
Connect to MongoDB
-
Working with routes
-
Working with controllers
-
POST request and JSON data
-
Create User model
-
Password hashing and compare
-
Save user in MongoDB
-
Validation on user registration
-
JWT - Json web token
-
Login user
-
Protecting route for logged in user
-
Admin middleware
-
Blog Schema
-
Form data on blog create
-
Validation on blog create
-
Create blog with image upload
-
Access uploaded images
-
Getting single blog by route params slug
-
Getting all blogs with user info
-
Update blog and image
-
Blog Delete
-
Resize image
-
-
FrontEnd with ReactJs and NextJS
-
NextJs React app setup
-
Creating navigation
-
Register page
-
Register success
-
Global state using Context and Local Storage
-
Login page
-
Conditional rendering and logout
-
Role based redirect
-
Protected admin pages
-
Protected user pages
-
Blog create form using rich text editor
-
Blog create API request
-
Fetch blogs in server rendered page
-
Blog cards
-
Single blog view
-
Blog view with details and metadata
-
Using react icons
-
Loading page
-
Blogs list for admin
-
Blog delete by admin
-
Blog edit page
-
Blog update by admin
-
Wrap up
-
Push code to Github
-
Create NGINX server in Digital Ocean
-